<template>
    <!-- 搜索头 -->
    <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" size="small">
        <el-form-item>
            <el-checkbox true-label="1" false-label="0" v-model="formInline.look_del" @change="lookDelChange" border>
                查看已删门店
            </el-checkbox>
        </el-form-item>
        <el-form-item>
            <el-date-picker :editable="false" :clearable="false" v-model="pickerDate" value-format="yyyy.MM.dd"
                type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期"
                end-placeholder="结束日期" :picker-options="pickerOptions" @change="dateChange"></el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-select placeholder="选择门店" v-model="formInline.store_id" @change="storeChange" filterable
                style="width:140px">
                <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <el-select placeholder="选择区域" v-model="formInline.area_id" style="width:100px" @change="areaChange"
                filterable>
                <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <el-select placeholder="机台类型" :clearable='true' v-model="formInline.project_type" style="width:100px"
                filterable @change="machineTypeChange">
                <el-option v-for="item in machine_type_list" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>
            <el-select placeholder="机台名称" :clearable='true' v-model="formInline.machine_name" style="width:100px"
                filterable>
                <el-option v-for="item in machine_name_list" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <dj-button size="small" @search="searchClick" />
        </el-form-item>
    </el-form>
</template>

<script>
    import {
        // getBrandList,
        getStoreList,
        getAreaList,
        get_machine_type,
        get_machine_name,
    } from "@/api/searchHeader/dj-search-tbsatn";
    import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils';
    export default {
        props: ["categoryId"],
        data() {
            return {
                storeList: null,
                brandList: [],
                machine_type_list: [],
                machine_name_list: [],
                areaList: [],
                formInline: {
                    brand_id: '',
                    area_id: '',
                    store_id: '',
                    begin_time: '',
                    end_time: '',
                    machine_name: '',
                    project_type: '',
                    look_del: '0'
                },
                pickerOptions: pickerOptionsF(-1),
                pickerDate: pickerDateF(-1, -1)
            };
        },
        activated() {
            if (!this.storeList) {
                this.getStore();
            }
        },
        methods: {
            lookDelChange() {
                this.getStore();
            },
            dateChange() {
                this.formInline.project_type = '';
                this.formInline.machine_name = '';
                this.storeChange();
            },
            getStore() {
                getStoreList({ look_del: this.formInline.look_del, category_id: this.categoryId }).then(response => {
                    this.storeList = response;
                   let data = response.filter(res => 
                        res.id == this.$store.getters.optionId
                    )
                    if(data.length>0){
                        this.formInline.store_id = data[0].id;
                    } else {
                        if(this.storeList.length > 0) {
                            this.formInline.store_id = this.storeList[0].id;
                        }
                    }
                    this.storeChange();
                });
            },
            storeChange() {
                this.formInline.project_type = '';
                this.formInline.machine_name = '';
                getAreaList({ sid: this.formInline.store_id }).then(response => {
                    this.areaList = response;
                    if(response.length > 0) {
                        this.formInline.area_id = response[0].id;
                    }
                    
                    this.areaChange();
                });
            },
            areaChange() {
                this.getMachineType();
            },
            getMachineType() {
                this.formInline.machine_name = '';
                let data = {
                    begin_time: this.pickerDate ? this.pickerDate[0] : '',
                    end_time: this.pickerDate ? this.pickerDate[1] : '',
                    area_id: this.formInline.area_id,
                    store_id: this.formInline.store_id,
                    brand_id: this.formInline.brand_id,
                }
                get_machine_type(data).then(response => {
                    this.machine_type_list = response;
                    // this.formInline.project_type = response[0].id;
                });
                this.machineTypeChange();
            },
            machineTypeChange() {
                this.formInline.machine_name = '';
                this.getMachineName();
            },
            getMachineName() {
                this.machine_name_list = [];
                let data = {
                    begin_time: this.pickerDate ? this.pickerDate[0] : '',
                    end_time: this.pickerDate ? this.pickerDate[1] : '',
                    area_id: this.formInline.area_id,
                    store_id: this.formInline.store_id,
                    brand_id: this.formInline.brand_id,
                    project_type: this.formInline.project_type,
                };
                get_machine_name(data).then(response => {
                    this.machine_name_list = response;
                    // this.formInline.machine_name = response[0].id;
                });
            },
            // 搜索
            searchClick() {
                if (this.formInline.machine_name == '') {
                    this.$message({ type: 'error', message: '请选择机台名称再进行查询' });
                    return;
                }
                optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
                    this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
                    this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
                    //第一个参数名为调用的方法名，第二个参数为需要传递的参数
                    this.$emit('fetchData', this.formInline);
                });
            },
        }
    };
</script>